import {Modal, Spin} from 'antd';
import React from 'react';
import {isEmpty, isFunction, omit} from 'lodash-es';
import BaseComp from "../Base/BaseComp";
import {getContainerFunc} from "../Base/helper/lifeCycle";
import styles from "./index.module.less";
// export type ModalCompProps = IBaseComp & ModalProps & {
//     /**
//      * loading Boolean 是否正在加载
//      * */
//     loading?: boolean; // 是否正在加载
//     /**
//      * title String 标题
//      * */
//     title?;
//     /**
//      * reactNode  自定义操作按钮
//      * */
//     action?; // 自定义操作按钮
//     /**
//      * boolean 是否显示
//      * */
//     isShowDetail?: boolean;
//     /**
//      * boolean 是否可移动端口
//      * */
//     canDrag?: boolean;
// }

class ModalComp extends BaseComp {
    randomClass;
    contain;
    header;
    footer;
    modalContent;

    mouseDownX = 0;
    mouseDownY = 0;

    headerY = 0;


    deltaX = 0;
    deltaY = 0;

    sumX = 0;
    sumY = 0;
    static defaultProps = {
        canDrag: true,
    };


    constructor(props) {
        super(props);
        this.randomClass = Math.random()
            .toString(36)
            .substring(2);
        this.state = {}
    }
    componentDidMount(props) {
        super.componentDidMount(props);
    }

    componentWillUnmount() {
        super.componentWillUnmount && super.componentWillUnmount();
        this.removeMove();
        window.addEventListener('mouseup', this.onMouseUp, false);
    }

    initEvent = (visible) => {
        const {title, wrapClassName} = this.props;
        if (title && visible) {
            setTimeout(() => {
                window.removeEventListener('mouseup', this.onMouseUp, false);

                this.contain = document.getElementsByClassName(this.randomClass)[0];
                if(!this.contain && wrapClassName){
                    this.contain = document.getElementsByClassName(wrapClassName)[0];
                }
                if ('undefined' === typeof this.contain || null === this.contain) return;

                this.header = this.contain.getElementsByClassName('ant-modal-header')[0];
                this.modalContent = this.contain.getElementsByClassName('ant-modal-content')[0];
                // this.footer = this.contain.getElementsByClassName('ant-modal-footer')[0];

                this.header.style.cursor = 'all-scroll';
                // this.footer.style.cursor = 'all-scroll';

                this.header.onmousedown = (e) => {
                    this.mouseDownX = e.pageX;
                    this.mouseDownY = e.pageY;


                    document.body.onselectstart = () => false;
                    window.addEventListener('mousemove', this.handleMove, false);
                    window.addEventListener('mouseup', this.onMouseUp, false);

                };


            }, 0)


        }
    };

    handleMove = (event) => {
        // console.log('event:',event)
        //计算移动过程中的值
        const deltaX = event.pageX - this.mouseDownX;
        const deltaY = event.pageY - this.mouseDownY;

        // const headerY = this.header.getBoundingClientRect().top;
        // if (headerY < 1 && deltaY < 0) {
        // return;
        // }
        const sumX = deltaX + this.sumX;
        let sumY = deltaY + this.sumY;

        this.deltaX = deltaX;
        this.deltaY = deltaY;

        this.modalContent.style.transform = `translate(${sumX}px, ${sumY}px)`;

    };
    removeMove = () => {
        window.removeEventListener('mousemove', this.handleMove, false);
    };
    onMouseUp = () => {
        document.body.onselectstart = () => true;

        this.sumX = this.sumX + this.deltaX;
        this.sumY = this.sumY + this.deltaY;

        this.removeMove();
        window.removeEventListener('mouseup', this.onMouseUp, false)
    };

    resetData(){
        this.deltaX = 0;
        this.deltaY = 0;

        this.sumX = 0;
        this.sumY = 0;
    }

    mainRender(context) {
        const {action, loading = false, wrapClassName, canDrag, visible} = this.props;
        if (canDrag) {
            this.initEvent(visible || this.props.isShowDetail);
        }
        const moreProps = {
            ...omit(this.props, ['action', 'loading']),
        };
        if (!isEmpty(action)) {
            moreProps.footer = action;
        }
        const ModalClassName = wrapClassName ? `${wrapClassName} ${this.randomClass}` : `${this.randomClass}`;

        return (
            <Modal
                visible={this.props.isShowDetail}
                confirmLoading={loading}
                keyboard={true}
                maskClosable={false}
                wrapClassName={ModalClassName}
                getContainer={() => getContainerFunc(this)}
                centered={true}
                {...moreProps}
            >
                <Spin delay={300} spinning={loading}>
                    {
                        this.props.children
                    }
                </Spin>
            </Modal>
        );
    }

}


export default ModalComp;
